<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@include file="/WEB-INF/templates/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="${basePath}/static/js/jcrop/jquery.Jcrop.css" type="text/css" />
<script src="${basePath}/static/js/jquery-1.7.2.min.js"></script>
<script src="${basePath}/static/js/jcrop/jquery.Jcrop.min.js"></script>
<script  type="text/javascript" src="${basePath}/static/layer/layer.js"></script>
<link href="${basePath}/static/layer/layer_style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.jcrop-holder #preview-pane {
  display: block;
  position: absolute;
  z-index: 2000;
  top: 10px;
  right: -280px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: white;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

#preview-pane .preview-container {
  width: 250px;
  height: 170px;
  overflow: hidden;
}

</style>
</head>
<body>

  <img src="${picUrl}" id="target" alt="[Jcrop Example]" />
  <div id="preview-pane">
    <div class="preview-container">
      <img src="${picUrl}" class="jcrop-preview" alt="Preview" />
    </div>
  </div>

  <div class="inline-labels">
    <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
    <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
    <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
    <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
    <label>W <input type="text" size="4" id="w" name="w" /></label>
    <label>H <input type="text" size="4" id="h" name="h" /></label>
    <button onclick="cut()" >裁剪</button>
    </div>

  <script type="text/javascript">
	  jQuery(function($){
		var jcrop_api,
			boundx,
			boundy,
			$preview = $('#preview-pane'),
			$pcnt = $('#preview-pane .preview-container'),
			$pimg = $('#preview-pane .preview-container img'),

			xsize = $pcnt.width(),
			ysize = $pcnt.height();
			$('#target').Jcrop({
			  onChange: updatePreview,
			  onSelect: updatePreview,
			  aspectRatio: xsize / ysize
			},function(){
			  var bounds = this.getBounds();
			  boundx = bounds[0];
			  boundy = bounds[1];
			  jcrop_api = this;
			  $preview.appendTo(jcrop_api.ui.holder);
			});

			function updatePreview(c){
			  if (parseInt(c.w) > 0){
				var rx = xsize / c.w;
				var ry = ysize / c.h;

				$pimg.css({
				  width: Math.round(rx * boundx) + 'px',
				  height: Math.round(ry * boundy) + 'px',
				  marginLeft: '-' + Math.round(rx * c.x) + 'px',
				  marginTop: '-' + Math.round(ry * c.y) + 'px'
				});
			  }

			  showCoords(c);
			};



			function showCoords(c) {
				$('#x1').val(c.x);
				$('#y1').val(c.y);
				$('#x2').val(c.x2);
				$('#y2').val(c.y2);
				$('#w').val(c.w);
				$('#h').val(c.h);
			 };

	  });
	  
	  function cut(){
		  var x=parseInt($('#x1').val());
		  var y=parseInt($('#y1').val());
		  var w=parseInt($('#w').val());
		  var h= parseInt($('#h').val());
		  var picUrl=$("#target").attr("src");
		 // alert(x+"-"+y+"-"+w+"-"+h+"-"+picUrl);
		  $.ajax({
			  type:"post",
			  data:{xwidth:x,ywidth:y,width:w,height:h,picUrl:picUrl},
			  url:"/scan/cutImg",
			  success:function(data){
				  layer.alert(data, {icon: 0});
			  }
		  })
	  }
	</script>
</body>
</html>

